<template>
        <div>
                <van-nav-bar title="候诊详情" left-text="" left-arrow @click-left="onClickLeft" />
                <div style="
                          width:88%;
                          background-color: white;
                          margin-top: 15px;
                          border-radius: 7px;
                          line-height: 50px;
                          display: flex;
                          padding: 20px;
                          margin-top: 0px;
                          ">
                        <div>
                                <div style="
                             display: flex;
                             ">
                                        <div>
                                                <img style="
                                                width:45px;
                                                height: 45px;
                                                " src="https://cdn7.axureshop.com/demo/2208121/images/%E5%8C%BB%E7%94%9F%E5%88%97%E8%A1%A8/u809.png"
                                                        alt="">
                                        </div>
                                        <div style="
                                        margin-top: -10px;
                                        margin-left: 18px;
                                        ">
                                                <p style="
                                             font-weight: 700;
                                             font-size: 18px;
                                             color:#000000;
                                             font-style: normal;
                                             ">刘医生<span style="
                                             font-weight: 400;
                                             font-size: 13px;
                                             color:#1F1F1F;
                                             margin-left: 10px;
                                             ">主任医师</span></p>
                                                <p style="
                                              font-weight: 400;
                                             font-size: 14px;
                                             color:#1F1F1F;
                                             margin-top: -27px;
                                             ">门诊外一科 <span style="margin-left: 10px;">四川省保健院南苑</span></p>
                                        </div>
                                </div>
                                <div style="
                                        display: flex;
                                        ">


                                </div>

                        </div>

                </div>
                <div style="
                          
                          background-color: white;
                          margin-left: 20px;
                          border-radius: 7px;
                          line-height: 50px;
                          display: flex;
                          height:71px;
                          ">
                        <div style="
                          width: 111px;
                          height: 71px;
                          background-color:rgba(255, 251, 230, 1);
                          border-top-left-radius: 7px;
                          border-bottom-left-radius: 7px;">
                                <p style="
                          font-size: 14px;
                          color:#FAAD14;
                          text-align: center;
                          ">当前接诊号</p>
                                <p style="
                           font-size: 20px;
                          color:#FAAD14;
                          text-align: center;
                          margin-top: -20px;
                          ">15</p>
                        </div>
                        <div style="
                          width: 111px;
                          height: 71px;
                          background-color:rgba(230, 244, 255, 1);
                          ">
                                <p style="
                          font-size: 14px;
                          color:#1677FF;
                          text-align: center;
                          ">我的排队号</p>
                                <p style="
                           font-size: 20px;
                          color:#1677FF;
                          text-align: center;
                          margin-top: -20px;
                          ">20</p>
                        </div>
                        <div style="
                          width: 111px;
                          height: 71px;
                          background-color:rgba(255, 241, 240, 1);
                          border-top-right-radius: 7px;
                          border-bottom-right-radius: 7px;
                          ">
                                <p style="
                          font-size: 14px;
                          color:#FF4D4F;
                          text-align: center;
                          ">等待人数</p>
                                <p style="
                           font-size: 20px;
                          color:#FF4D4F;
                          text-align: center;
                          margin-top: -20px;
                          ">{{ count }}</p>
                        </div>
                </div>


                <button style="
                width: 120px;
                height: 120px;
                color:#FFFFFF;
                background-color: #1677ff;
                border-radius: 50%;
                font-size: 14px;
                font-weight: 400;
                margin-top: 100px;
                text-align: center;
                line-height: 120px;
                box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
                border:0;
                margin-left: 130px;
                " @click="shuaxin">
                        刷新队列
                </button>
                <p style="
                font-weight: 400;
                font-size: 12px;
                color: #AAAAAA;
                text-align: center;
                margin-top: 20px;
                ">注：如有特殊情况，请以现场排队情况为准</p>
        </div>


</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElNotification } from 'element-plus'

const onClickLeft = () => history.back();
const count = ref(5)
const shuaxin = () => {

        ElNotification({
                dangerouslyUseHTMLString: true,
                message: '<strong>正在刷新中...</strong>',
        })
        setTimeout(() => {
                count.value = 1
        }, 5000)

}



</script>

<style scoped></style>